<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/cost_of_living/jquery.js"></script>
<script type="text/javascript">
var cnt=0;
$(document).ready(function(){
	$(".from").hide();
	$("#sth").on("click", function(){
		this.value="";
	});
	$("#decide").on("click", function(){
		var sth = $("#sth").val();
		$("#input_sth").remove();
		$("#sth").html(sth).css("font-size", "80px");	
		
		
		$(".freefrom").hover(function(){
			$(".from").animate({"margin-left":"+=100"}, 1);
		}, function(){
			//$("#from").animate({"margin-left":50}, 1000);
		});
		
		$("#sth").on("click", function(){
			$(".from").show();
		});
		

		//버튼을 클릭하면 색깔이 바뀌도록 한다.
		$(".freefrom").on("click", function(event){
			$("#sth").css("color", "white");
			//alert(event.which);
			cnt++;
			if(cnt==1){ //cnt=1
				$("body").css("background-color", "black");					
			}else if(cnt==2){ //cnt=2
				$("body").css("background-color", "orangered");	
			}else if(cnt==3){ //cnt=3
				$("body").css("background-color", "yellow");					
			}else if(cnt==4){ //cnt=4
				$("body").css("background-color", "RoyalBlue");					
			}else if(cnt==5){ //cnt=5
				$("body").css("background-color", "gray");	
				cnt=0;
			}
		});
			//value를 클릭해도 바탕색이 바뀜
			$("#sth").on("click", function(event){
				$(this).css("color", "white");
				//alert(event.which);
				cnt++;
				if(cnt==1){ //cnt=1
					$("body").css("background-color", "black");					
				}else if(cnt==2){ //cnt=2
					$("body").css("background-color", "yellow");					
				}else if(cnt==3){ //cnt=3
					$("body").css("background-color", "orangered");	
				}else if(cnt==4){ //cnt=4
					$("body").css("background-color", "RoyalBlue");					
				}else if(cnt==5){ //cnt=5
					$("body").css("background-color", "gray");	
					cnt=0;
				}
		});
	});
});
	
</script>
<style type="text/css">
body{
	height: 800px;
	vertical-align:middle
}
div{
	position: absolute; 
	left: 10%; top: 50%;
}
#sth{
	cursor: pointer;
}
#freefrom{
	cursor: wait;
}
#re{
	cursor: pointer;
	color: white;
	font-size: 12px;
	text-decoration: none;
}
#re:hover{
	color: lightgray;
}
</style>
</head>
<body>
<a id ="re" href="/cost_of_living/freefromSth.jsp">다시</a>
<div id="#input">
	<span id="input_sth">
		<input type="text" id="sth" value="당신이 현재 벗어나고 싶은 곳 혹은 벗어나고 싶은 것을 입력하세요." size="80" autofocus>
		<button id="decide">결정</button>
	</span>
</div>
<div id="value">
	<span id="sth"></span>&nbsp;&nbsp;&nbsp;&nbsp;
	<span class="from"><button class='freefrom'>에서 벗어나기</button></span>
	<span class="from"><button class='freefrom'>에서 벗어나기</button></span>
	<span class="from"><button class='freefrom'>에서 벗어나기</button></span>
	<span class="from"><button class='freefrom'>에서 벗어나기</button></span>
	<span class="from"><button class='freefrom'>에서 벗어나기</button></span>
	<!-- 버튼 여러개 추가하기 -->
</div>
</body>
</html>